<style scoped>
    .layout {
        border: 1px solid #d7dde4;
        background: #fff;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    
    .layout-logo {
        width: 355px;
        height: 390px;
        background: #fff;
        border-radius: 3px;
        border-bottom: 2px solid #6bc907;
        float: right;
        position: relative;
        top: 60px;
        right: 180px;
    }
    
    .Login_user {
        width: 355px;
        height: 390px;
        padding: 30px;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .layout-header {
        height: 500px;
        background: url('../assets/img/login_bg.png') no-repeat center;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    }
    
    .layout-copy {
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }
    
    .layout-ceiling {
        background: #fff;
        padding: 20px 0;
        overflow: hidden;
    }
    
    .layout-ceiling-main {
        float: left;
        margin-left: 15px;
        margin-top: 30px;
        font-size: 25px;
        color: #0e6c26;
    }
    
    .layout-ceiling-main a {
        color: #0e6c26;
    }
    
    .logo img {
        margin-left: 100px;
        display: block;
        float: left;
    }
    
    .Qusition {
        width: 100%;
        text-align: center;
        margin-top: 30px;
        font-size: 14px;
    }
    
    .Qusition a {
        color: #676c71;
    }
</style>

<template>
    <div class="layout">
        <div class="layout-ceiling">
            <div class="logo">
                <img src="../assets/img/logo_index.png" height="73" width="276">
            </div>
            <div class="layout-ceiling-main">
                企业端生产管理系统
            </div>
        </div>
        <div class="layout-header">
            <div class="layout-logo">
                <div class="Login_user">
                    <p style="font-size:20px;padding:10px;color:#08a692">登陆</p>
                    <i-form ref:formInline :model="formInline" :rules="ruleInline">
                        <Form-item prop="user">
                            <i-input type="text" v-model="formInline.user" placeholder="手机/邮箱/会员名">
                                <Icon type="ios-person-outline" slot="prepend" size="22"></Icon>
                            </i-input>
                        </Form-item>
                        <Form-item prop="password">
                            <i-input type="password" v-model="formInline.password" placeholder="请输入密码">
                                <Icon type="ios-locked-outline" slot="prepend" size="22"></Icon>
                            </i-input>
                        </Form-item>
                        <Form-item>
                            <i-button type="primary" @click="handleSubmit('formInline')" style="width:100%;background:#6bc907;border:1px solid #6bc907">登录</i-button>
                        </Form-item>
                        <Checkbox class="check" v-model="single" @click="rememberPassword">{{remPassLabel}}</Checkbox>
                        <p style="color:#676c71;">还没有账户？<a href="" style="color:#ff7830">免费注册</a></p>
                    </i-form>
                    <p class="Qusition"><a href="#" title="">如有问题，请拨打客服热线</a></p>
                </div>
            </div>
        </div>
        <div class="layout-copy">
            copyright&copy;2010-2017 By Jawasoft 版权所有
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                token: '',
                single: false,
                remPassLabel: "记住账号密码",
                formInline: {
                    user: '',
                    password: ''
                },
                ruleInline: {
                    user: [{
                        required: true,
                        message: '请填写用户名',
                        trigger: 'blur'
                    }],
                    password: [{
                            required: true,
                            message: '请填写密码',
                            trigger: 'blur'
                        },
                        {
                            type: 'string',
                            min: 4,
                            message: '密码长度不能小于4位',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        mounted() {
            this.formInline.user = localStorage.getItem("user");
            this.formInline.password = localStorage.getItem("password");
            if (this.formInline.user != null && this.formInline.password != null) {
                this.single = true;
            }
        },
        methods: {
            rememberPassword(token, uName, UserKey) {
                localStorage.setItem("token", token);
                sessionStorage.setItem("name", uName);
                localStorage.setItem("UserKey", UserKey);
                //把手机号和密码存到本地
                if (this.single) {
                    localStorage.setItem("user", this.formInline.user);
                    localStorage.setItem("password", this.formInline.password);
                }
            },
            //请求接口
            handleSubmit(formInline) {
                let userName = this.formInline.user;
                let userPassword = this.formInline.password;
                this.getToken(userName,userPassword);
            },
            getToken: function(userName,userPassword) {
                let that = this;
                //第一次请求
                this.$ajax.get(this.api.oauth.token).then(function(response) {
                    let token = response;
                    //第二次请求
                   that.getPukey(token,function(publickey) {
                      //第3次请求
                        let PublicKey = publickey.Pubkey;
                        let tokenn = token.Token;
                        that.getUserKey(userName,userPassword,PublicKey,tokenn)
                    })                   
                });
            },
            getPukey: function(token,callback) {
                this.$ajax.post(this.api.oauth.pubkey,token)
                    .then(function(response) {
                        return callback(response)
                    }).catch(function(response) {
                        console.log(response)
                    })
            },
            getUserKey: function(userName,userPassword,PublicKey,tokenn) {
                   //加密后的密码
                let that = this;
                let newpwd = stringToHex(des(PublicKey, userPassword, 1, true, PublicKey));
                let data = {
                    "PassWord": newpwd,
                    "LoginBy": userName,
                    "PublicKey": PublicKey,
                    "Token":tokenn
                };
                console.log(data);
                this.$ajax.post(this.api.oauth.login, data).then(function(response) {
                     console.log(response.UserKey);
                     //存储UserKey
                     localStorage.setItem("UserKey",response.UserKey);
                    that.$Message.success('登陆成功!');
                    that.$router.push({ path: '/table' }) 
                }).catch(function(response) {
                   that.$Message.error(response.Msg);
                    console.log(response);
                })
            }
        },
    }
</script>
